@extends('layouts._app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('static/webuploader/css/webuploader.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset('static/webuploader/css/style.css')}}"/>
    <style>
        #LAY_demo3 li {
            float: left;
            padding: 3px;
            position: relative;
        }

        #LAY_demo3 li span {
            color: #ffffff;
            font-size: 32px;
            font-weight: bold;
            height: 32px;
            line-height: 32px;
            z-index: 301;
            float: right;
            margin-right: 10px;
            cursor: pointer;
        }

        #container {
            width: 49%;
            float: right;
        }

        #LAY_demo3 li img {
            width: 300px;
            height: 200px;
            cursor: pointer;
        }

        .div {
            position: absolute;
            width: 300px;
            display: none;
            height: 32px;
            top: 5px;
            overflow: hidden;
            z-index: 300;
            background-color: rgba(31, 2, 6, 0.16);
        }
    </style>
    <body>
    <div class="layui-tab page-content-wrap">
        <div class="layui-form-item">
            <div class="layui-inline tool-btn">
                <fieldset class="layui-elem-field site-demo-button">
                    <legend>素材管理：{{$request['title']}}</legend>
                    <div>
                        <a class="layui-btn layui-btn-small layui-btn-primary" id='email-refresh-btn'
                           href="{{route('blog.material.index')}}" data-title='刷新'>
                            <i class="layui-icon">&#x1002;</i>
                        </a>
                        <a href="{{route('blog.material.index')}}?title=头像素材&category=avatar&is_show=2"
                           class="layui-btn layui-btn-normal" data-title="头像素材">头像素材</a>
                        <a href="{{route('blog.material.index')}}?title=特殊表情素材&category=material&is_show=3"
                           class="layui-btn layui-btn-normal" data-title="特殊表情素材">特殊表情素材</a>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-tab-content">
            @include('layouts._flash')
            <div class="site-demo-flow" id="LAY_demo3">
                <ul class="flow-default" style="width: 50%;overflow:auto;height:-webkit-fill-available;float: left"
                    id="LAY_demo2">
                </ul>
                {!! Form::hidden('','1',['id'=>'material']) !!}
                {!! Form::hidden('',"{$request['category']}",['id'=>'category']) !!}
                {!! Form::hidden('',"{$request['is_show']}",['id'=>'is_show']) !!}
                {!! Form::hidden('','blog',['id'=>'user']) !!}
                <div id="container">
                    <div id="uploader">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker">或将文件拖到这里，单次最多可选300张</div>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div>
                                <div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="main"></div>
            </div>
        </div>
    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/layer.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/webuploader/js/webuploader.js')}}"></script>
    <script src="{{asset('static/webuploader/js/upload.js')}}"></script>
    <script>
        layui.config({
            base: '/static/admin/js/module/',
        }).extend({
            dialog: 'dialog',
        });
        layui.use(['jquery', 'flow', 'layer', 'dialog'], function () {
            var flow = layui.flow,
                layer = layui.layer,
                dialog = layui.dialog,
                $ = layui.jquery;
            flow.load({
                elem: '#LAY_demo2' //流加载容器
                , scrollElem: '#LAY_demo2'
                , isAuto: false
                , isLazyimg: true
                , done: function (page, next) { //加载下一页
                    setTimeout(function () {
                        $.ajax({
                            type: 'GET',
                            url: "{{route('blog.material.picFile')}}",
                            data: {
                                page: page,
                                category: '{{$request['category']}}',
                                is_show: '{{$request['is_show']}}',
                                '_token': '{{ csrf_token() }}'
                            },
                            dataType: "json",
                            complete: function (XHR) {
                                XHR = null;
                            },
                            error: function (xhr) {//获取ajax的错误信息
                                layer.alert(xhr.responseText, "Failed", function () {
                                    layer.closeAll();
                                });
                            },
                            success: function (response) {
                                if (response.code == 403) {
                                    layer.msg(response.msg, {icon: 4, time: 3000})
                                    return false;
                                }
                                if (response.code != 200) {
                                    layer.msg(response.msg, {icon: 5, time: 3000});
                                    return false;
                                }
                                var lis = [];
                                var list = response.data.data;
                                for (var i = 0; i < list.length; i++) {
                                    lis.push('<li data-id="' + list[i].id + '"><div class="div"><span title="删除" class="delete">×</span></div><img title="' + list[i].name + '" lay-src="' + list[i].url + '"></li>')
                                }
                                next(lis.join(''), page < response.data.last_page); //假设总页数为 6
                                var lay = $("#LAY_demo2 li");

                                lay.mouseenter(function () {
                                    $(this).find('.div').attr('style', 'display:block');
                                })

                                lay.mouseleave(function () {
                                    $(this).find('.div').attr('style', 'display:none');
                                })
                            }
                        })
                    }, 500);
                }
            });

            $(document).on('click', '.delete', function () {
                var id = $(this).parents('li').data('id');
                dialog.confirm({
                    message: '您确定要删除吗？',
                    success: function () {
                        $.ajax({
                            type: 'GET',
                            url: '{{route('blog.material.destroy')}}',
                            data: {id: id},
                            dataType: "json",
                            beforeSend: function () {
                                layer.load(1, {
                                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                                });
                            },
                            complete: function (XHR) {
                                XHR = null;
                            },
                            error: function (xhr) {//获取ajax的错误信息
                                layer.alert(xhr.responseText, "Failed", function () {
                                    layer.closeAll();
                                });
                            },
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 403) {
                                    layer.msg(res.msg, {icon: 4, time: 3000})
                                    return false;
                                }
                                if (res.code != 200) {
                                    layer.msg(res.msg, {icon: 5, time: 3000})
                                    return false;
                                }
                                layer.msg(res.msg, {icon: 1, time: 3000}, function () {
                                    window.location.reload();
                                });
                            }
                        })
                    },
                    cancel: function () {
                        return false;
                    }
                })
            })
        });

        $(document).on('click', 'li img', function () {
            var id = $(this).parent('li').data('id');
            $.ajax({
                url: '{{route('blog.material.picFile')}}',
                type: "get",
                dataType: "json",
                data: {
                    id: id,
                    category: '{{$request['category']}}',
                    is_show: '{{$request['is_show']}}',
                    status: 1,
                    'title': '{{$request['title']}}'
                },
                success: function (data) {
                    if (data.code == 403) {
                        layer.msg(data.msg, {icon: 4, time: 3000})
                        return false;
                    }
                    if (data.code != 200) {
                        layer.msg(data.msg, {icon: 5, time: 3000})
                        return false;
                    }
                    layer.photos({
                        photos: data.data,
                    });
                }
            });
        })
    </script>
    </body>
@endsection
